<!-- 标签 -->
<template>
  <span
    class="cm-tag"
    :class="[value ? 'tag-checked' : 'tag-unchecked',colored? 'tag-colored':'']"
    @click="handleChange"
    v-if="!destroyself"
  >
    <slot></slot>
    <span v-if="closable" class="tag-close-icon" @click.stop="close">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-cmguanbi4"></use>
      </svg>
    </span>
  </span>
</template>

<script>
export default {
  data() {
    return {
      destroyself: false,
    };
  },

  props: ["value", "closable", "colored"],

  components: {},

  computed: {},

  methods: {
    handleChange() {
      let sendValue = !this.value;
      this.$emit("handleChange", sendValue);
    }, //方法封装，将cm-tag的点击事件传递给父组件，在父组件中进行函数编写
    close(e) {
      // this.destroyself = true;
      this.$emit("close", e);
    },
  },

  watch: {
    value(newval) {
      console.log("valuechanged", newval);
    },
  },
};
</script>
<style>
.cm-tag {
  display: inline-block;
  background-color: transparent;
  color: rgb(95, 95, 95);
  font-size: 12px;
  padding: 0 7px;
  line-height: 20px;
  border: 0.5px rgb(186, 186, 186) solid;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  margin: 0 8px 8px 0;
}
span.tag-unchecked:hover {
  color: rgb(80, 80, 255);
  border: 0.5px rgb(80, 80, 255) solid;
}
span.tag-colored {
  color: rgb(80, 80, 255);
  border: 0.5px rgb(80, 80, 255) solid;
}
span.tag-checked {
  border: 0.5px rgb(80, 80, 255) solid;
  background-color: rgb(80, 80, 255);
  color: white;
  transition: all 0.2s;
}
span.tag-checked:hover {
  background-color: rgb(95, 95, 255);
}
.tag-close-icon {
  vertical-align: center;
  display: inline-block;
  margin: 0 0 0 0;
  padding: 0 0 0 7px;
}
span.tag-unchecked > .tag-close-icon > .icon {
  font-size: 12px;
  color: rgb(95, 95, 95);
}
span.tag-checked > .tag-close-icon > .icon {
  font-size: 12px;
  color: white;
}

span.tag-unchecked > .tag-close-icon > .icon:hover {
  color: rgb(255, 123, 111);
}
</style>
